<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css" />
	<style>
		.form-select {
			width: 103px;
			display: inline-block;
		}

		.col-form-label {
			text-align: right;
		}

		.figure-img {
			width: 100px;
			height: 100px;
			cursor: pointer;
		}

		#upload {
			display: none;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1 class="p-5">个人设置</h1>
		<form class="col-4">
			<div class="row mb-3">
				<label class="col-form-label col-3">昵称：</label>
				<div class="col-9">
					<input class="form-control col-9" type="text" name="nickname" />
				</div>
			</div>
			<div class="row mb-3">
				<label class="col-form-label col-3">籍贯：</label>
				<div class="col-9">
					<select class="form-select col-4" name="province">
						<option value="">--省--</option>
					</select>
					<select class="form-select col-4" name="city">
						<option value="">--市--</option>
					</select>
					<select class="form-select col-4" name="area">
						<option value="">--区--</option>
					</select>
				</div>
			</div>
			<div class="row mb-3">
				<label class="col-form-label col-3">头像：</label>
				<div class="col-9">
					<input class="form-control col-9" type="hidden" name="avatar" />
					<figure class="figure">
						<input type="file" id="upload" />
						<img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
							class="figure-img img-fluid rounded" alt="..." id='img' />
						<figcaption class="figure-caption">修改头像</figcaption>
					</figure>
				</div>
			</div>
			<div class="row mb-3">
				<label class="col-3"></label>
				<div class="col-9">
					<button type="submit" class="btn btn-primary">保存</button>
				</div>
			</div>
		</form>
	</div>

	<script src="./lib/bootstrap.min.js"></script>
	<script src="./lib/axios.js"></script>
	<script>

		// 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939


		// 功能列表
		// 功能1: 上传头像
		// 功能2: 页面初始化: 获取个人信息，并渲染到页面中
		// 功能3: 省市区的联动效果
		// 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
		//        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况



		// 要求： 
		// 1. 使用 axios 发送请求
		// 2. 设置 axios 请求根路径
		// 3. 配合 async await 完成功能


		const dom = (ele) => document.querySelector(ele)
		axios.defaults.baseURL = 'http://ajax-api.itheima.net'


		//获取个人信息渲染到页面
		async function getRender() {
			const { data: { data } } = await axios.get('/api/settings')
			console.log(data, data.province)
			dom('[name=nickname]').value = data.nickname
			dom('#img').src = data.avatar
			Pro(data.province)
			city(data.province, data.city)
			area(data.province, data.city, data.area)
		}
		getRender()
		//省市县

		//封装省
		async function Pro(province) {
			const { data: proData } = await axios.get('/api/province')
			const proStr = proData.data.map(item => `<option value="${item}">${item}</option>`)
			dom('[name=province]').innerHTML = '<option value="">--省--</option>' + proStr
			dom('[name=province]').value = `${province}`
		}
		//封装市
		async function city(province, city) {
			const { data: cityData } = await axios.get('/api/city', { params: { pname: `${province}` } })
			const cityStr = cityData.data.map(item => `<option value="${item}">${item}</option>`)
			dom('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr
			dom('[name=city]').value = `${city}`
		}
		//封装区
		async function area(province, city, area) {
			const { data: areaData } = await axios.get('/api/area', { params: { pname: `${province}`, cname: `${city}` } })
			const areaStr = areaData.data.map(item => `<option value="${item}">${item}</option>`)
			dom('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr
			dom('[name=area]').value = `${area}`
		}

		//事件监听
		dom('[name=province]').addEventListener('change', async function () {
			await city(this.value, '')
			dom('[name=area]').innerHTML = '<option value="">--区--</option>'
		})
		dom('[name=city]').addEventListener('change', async function () {
			area(dom('[name=province]').value, this.value, dom('[name=area]').value)
		})

		//头像上传
		dom('.figure').addEventListener('click', function () {
			dom('#upload').click()
		})
		dom('#upload').addEventListener('change', async function () {
			const fd = new FormData()
			fd.append('avatar', this.files[0])
			const { data } = await axios.post('/api/file', fd)
			dom('#img').src = data.data.url
		})


		//提交信息
		dom('.btn-primary').addEventListener('click', async function (e) {
			e.preventDefault()
			const res = await axios.put('/api/settings', {
				nickname: dom('[name=nickname]').value,
				province: dom('[name=province]').value,
				city: dom('[name=city]').value,
				area: dom('[name=area]').value,
				avatar: dom('#img').src
			})
			getRender()
		})



	</script>
</body>

</html>